import { Component, PropsWithChildren } from 'react';
import Taro from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import './index.scss';

export default class Demo extends Component<PropsWithChildren> {
  // 生命周期

  /**
   * 对应小程序的onLoad
   * 参数：options
   * 可以通过options或在该生命周期内调用getCurrentInstance().router，获取页面路由参数
   *
   * */
  onLoad(options) {
    console.log(options, 'options');
    const params = Taro.getCurrentInstance().router?.params;
    console.log(params, 'params');
  }

  // 卸载
  onUnload() {
    console.log('这是页面生命周期函数onUnload');
  }
  /**
   *
   * 从此生命周期开始可以使用 createCanvasContext 或 createSelectorQuery 等 API 访问小程序渲染层的 DOM 节点。
   * */
  onReady() {
    // onReady 触发后才能获取小程序渲染层的节点
    // Taro.createSelectorQuery().select('#only')
    //   .boundingClientRect()
    //   .exec(res => console.log(res, 11))
  }

  // onLoad之后，页面组件渲染到Taro的虚拟DOM之前触发
  componentWillMount () {
    console.log('这是页面生命周期componentWillMount函数');
  }

  /**
   * 页面组件渲染到Taro的虚拟DOM之后触发，此时可以获取到DOM
   * 此时能访问到 Taro 的虚拟 DOM（使用 React ref、document.getElementById 等手段），并支持对其进行操作（设置 DOM 的 style 等）。
   *
   * 但此时不代表 Taro 的虚拟 DOM 数据已经完成从逻辑层 setData 到视图层。
   * 因此这时无法通过 createSelectorQuery 等方法获取小程序渲染层 DOM 节点。 只能在 onReady 生命周期中获取。
   */
  componentDidMount () {
    console.log('这是页面生命周期componentDidMount函数');
  }

  /**
   *
   * 当一个组件被从 DOM 中移除时
   *
   * */
  componentWillUnmount () {
    console.log('这是页面生命周期componentWillUnmount函数');
  }

  /*
  * 对应onShow
  * 显示从后台
  * */
  componentDidShow () {
    console.log('这是页面生命周期componentDidShow函数');
  }

  /**
   * 对应onHide
   *
   * 页面隐藏
   *
   * */
  componentDidHide () {
    console.log('这是页面生命周期componentDidHide函数');
  }

  render () {
    return (
      <View className='index' id='only'>
        <Text>Hello world!</Text>
        <div>这是div标签</div>
      </View>
    )
  }
}
